<!--
 * @Description: 选择货物状态
 * @Author: Kerwin
 * @Date: 2025-04-27 17:30:11
 * @LastEditTime: 2025-10-09 14:35:05
 * @LastEditors:  Please set LastEditors
-->
<template>
  <u-popup v-model="currentShow" @close="handleClose" :mode="mode">
    <view class="bt">请选择申请类型</view>
    <view class="radio-group">
      <u-radio-group
        v-model="goodsZt"
        @change="handleRadioChange"
        class="dxGroup"
      >
        <!-- 每个单选框项单独占一行 -->
        <view class="radio-item" v-for="(item, index) in radioArr" :key="index">
          <u-radio :name="item.name">
            {{ item.name }}
          </u-radio>
        </view>
      </u-radio-group>
    </view>

    <!-- 底部操作按钮 -->
    <view class="footer-btn">
      <u-button
        @click="handleCancel"
        :disabled="disabled"
        style="margin-right: 20rpx"
      >
        取消
      </u-button>
      <u-button @click="handleConfirm" type="primary" :disabled="!canConfirm">
        确认
      </u-button>
    </view>
  </u-popup>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, defineEmits, computed } from 'vue'

// 定义组件属性
const props = defineProps({
  // 控制弹窗显示/隐藏（外部传入）
  visible: {
    type: Boolean,
    default: false
  },
  // 是否禁用组件
  disabled: {
    type: Boolean,
    default: false
  },
  // 弹窗模式（参考u-popup文档）
  mode: {
    type: String,
    default: 'bottom'
  }
})

// 定义事件
const emit = defineEmits<{
  // 关闭弹窗事件
  (e: 'close'): void
  // 确认选择事件
  (e: 'confirm', goodsZt: Object): void
  // 取消事件
  (e: 'cancel'): void
}>()

// 内部显示状态（避免直接修改props）
const currentShow = ref(false)
// 选中的商品状态
const goodsZt = ref('')
// 原因列表
const radioArr = ref([
  { id: 1, name: '未收货退款' },
  { id: 2, name: '退货退款' },
  { id: 3, name: '换货补发' },
  { id: 4, name: '不退货仅退款' }
])

// 监听外部visible变化，同步到内部状态
watch(
  () => props.visible,
  (newVal) => {
    currentShow.value = newVal
    // 重置表单当弹窗关闭时
    if (!newVal) {
      goodsZt.value = ''
    }
  },
  { immediate: true }
)

// 监听内部显示状态变化，通知外部
watch(
  () => currentShow.value,
  (newVal) => {
    if (!newVal) {
      emit('close')
    }
  }
)

// 单选框变化处理
const handleRadioChange = (val: string) => {
  goodsZt.value = val
}

// 取消按钮
const handleCancel = () => {
  currentShow.value = false
  emit('cancel')
}

// 确认按钮
const handleConfirm = () => {
  if (!canConfirm.value) return
  // 查找选中的项并传递给父组件
  const selectedItem = radioArr.value.find(
    (item) => item.name === goodsZt.value
  )
  if (selectedItem) {
    emit('confirm', selectedItem)
  }

  currentShow.value = false
}

// 关闭弹窗处理
const handleClose = () => {
  currentShow.value = false
  emit('close')
}

// 计算是否可以确认
const canConfirm = computed(() => {
  return goodsZt.value !== '' // 选中值时返回true，否则false
})
</script>

<style lang="less" scoped>
.dxGroup {
  display: block;
  padding: 20rpx;
}
.radio-item {
  display: block; // 块级元素，自动换行
  margin-bottom: 5rpx; // 选项之间的垂直间距
  padding: 5rpx 0; // 增加点击区域
}
.radio-group {
  padding: 20rpx 0;
  background-color: #fff;
}

.footer-btn {
  display: flex;
  padding: 20rpx;
  background-color: #fff;
  button {
    flex: 1;
  }
}

.bt {
  font-size: 36rpx;
  font-weight: bold;
  padding: 20rpx;
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}
</style>
